 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{$Think.config.site.title} - 管家管理</title>
    <meta name="keywords" content="{$Think.config.site.keywords}">
    <link href="{$Think.config.site.resource_url}css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/animate.min.css" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/style.min.css?v=4.0.0" rel="stylesheet">
</head>
<style>
ul{margin: 0;padding: 0;}
ul li{list-style: none;}

a,a:hover,a:link{color: #676a6c}

.clear{clear: both;}

.address-box{
	display:-webkit-box;
	display:-webkit-flex;
	display:flex;
	padding:10px 0;
	align-items: center;
	padding: 15px;
	background: #fff;
	margin-bottom: 8px;
	cursor: pointer;
}
.address-info{
	-webkit-box-flex:1;
	-webkit-flex:1;
	flex:1;
}

.goods-box,.price-box{
	padding: 10px 15px 15px;
	background: #fff;
	margin-bottom: 8px;
	align-items: center;
}
.goods-box .msg{border-bottom: 1px solid #eee; padding: 0px 0px 8px; font-size: 12px;}
.goods-item,.price-item{
	display:-webkit-box;
	display:-webkit-flex;
	display:flex;
	padding:10px 0;
	align-items: center;
}
.goods-item .item{
	-webkit-box-flex:1;
	-webkit-flex:1;
	flex:1;
}
.img-box{
	-webkit-box-flex:1;
	-webkit-flex:1;
	flex:1;
	overflow: hidden;
}
.item-box{table;  width: 95%; }
.img-box { width: 25%; float: left;}
.img-box img{width: 100%;}
.op-box{}
.op-box i{font-size: 24px;}
.op-box span{line-height: 16px;}

.price-item{
	border-bottom: 1px solid #eee;
}
.price-item:last-child {border: none;}
.price-item-title{
	-webkit-box-flex:1;
	-webkit-flex:1;
	flex:1;
}

.goods-list{display:-webkit-box;display:-webkit-flex;display:flex; background: #fff; padding: 15px; border-bottom: 8px solid #f3f3f4;}
.list-box,.goods-v{
	display: -webkit-box;
    display: -webkit-flex;
    display: flex;
	-webkit-box-flex:1;
	-webkit-flex:1;
	flex:1;
}
.v-img{ width: 20%; display: -webkit-box; display: -webkit-flex;  display: flex; align-items: center;} .v-img img{width: 100%;}
.v-info{
	-webkit-box-flex:1;
	-webkit-flex:1;
	flex:1;
	padding: 0px 0 0 10px
}
.v-info p{margin:0; }
.v-info .v-specval{font-size: 14px; color: #888; margin-top: 5px;}

.brand{display: inline-block;
    padding: 0px 5px;
    background: #f1b348;
    border-radius: 5px;
    font-size: 12px;
    color: #fff;}
p.name{display: inline-block;
    margin-left: 10px;
    font-size: 14px;}
</style>
<body class="gray-bg">
	<div class="mbody">
		<div class="address-box">
			<div class="address-info" id="address" data-id="{$address.address_id}">
				<p><span id="name">{$address.name}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="phone">{$address.phone}</span></p>
				<p id="pcd">{$address.pcd} {$address.address}</p>
			</div>
			<div class="op-box">
				<i class="fa fa-angle-right"></i> <!-- fa-chevron-right -->
			</div>
		</div>

		<div class="goods-box">
			<div class="msg">{$shippingmsg}</div>
			<div class="goods-item">
				<div class="item">
					<div class="item-box">
					{volist name="goods" id="vo" length="4"}
						<div class="img-box"><img src="{$vo.picture}"></div>
					{/volist}
					</div>
				</div>
				<div class="op-box">
					<span class=" ">共计{:sizeof($goods)}件</span> <i class="fa fa-angle-right"></i>
				</div>
			</div>
		</div>

		<div class="price-box">
			<div class="price-item">
				<div class="price-item-title">商品总额</div>
				<div class="goodsprice">￥{$totalprice}</div>
			</div>
			<div class="price-item">
				<div class="price-item-title">订单运费</div>
				<div class="deliveryfee">￥{$delivery_fee['delivery_fee']}</div>
			</div>
		</div>

		<div class="price-box">
			<textarea name="remarks" style="width: 100%; height: 100px; border:1px solid #eee;" placeholder="订单备注"></textarea>
		</div>
	</div>
	<style type="text/css">
		.mbody{position: relative; margin-bottom: 46px;}
		.mfooter{ position: fixed; width: 100%; height: 45px; bottom: 0; left: 0; background: #fff; z-index: 10; }
		.fnav-box{  width: 100%; height: 100%; display:-webkit-box;display:-webkit-flex;display:flex; align-items:center;
}
		.fnav{
			display: -webkit-box;
		    display: -webkit-flex;
		    display: flex;
			-webkit-box-flex:1;
			-webkit-flex:1;
			flex:1;
			padding: 0 25px;
		}
		.allcheck{
			-webkit-box-flex:1;
			-webkit-flex:1;
			flex:1;
		}
		.submit{width: 80px;  height: 100%; line-height: 45px; color: #fff; text-align: center; cursor: pointer;}
		
		.totalprice{color: rgb(255, 78, 78)}
	</style>
	<div class="mfooter">
		<div class="fnav-box">
			<div class="fnav">
				<div class="" >
					总价：<span class="totalprice">{$totalprice+$delivery_fee['delivery_fee']}</span>
				</div>
			</div>
			<div class="gocart submit" style="background: #dcd835; ">代下单</div>
			<!-- <div class="paybtn submit" style="background: #f16927; ">代支付</div> -->
		</div>
	</div>
    <script src="{$Think.config.site.resource_url}js/jquery.min.js?v=2.1.4"></script>
    <script src="{$Think.config.site.resource_url}js/bootstrap.min.js?v=3.3.5"></script>
    <script src="{$Think.config.site.resource_url}js/plugins/layer/layer.js"></script>
    <script src="{$Think.config.site.resource_url}js/plugins/iCheck/icheck.min.js"></script>
    <script src="{$Think.config.site.common_resource_url}js/majax.js"></script>
    <script src="{$Think.config.site.common_resource_url}js/jedit.js"></script>
</body>

</html>
<script>
var layer_font;
function selectAddress(d){
	$('#name').text(d.name)
	$('#phone').text(d.phone)
	$('#pcd').text(d.pcd+' '+d.address)
	$('#address').data('id',d.id)
	layer.close(layer_font);
}

$('.address-box').click(function(){
	layer_font = layer.open({
		type: 2,
		title: '选择地址',
		shadeClose: true,
		shade: 0.8,
		area: ['100%', '100%'],
		content: '{:url("address",["shop_id"=>$shop_id])}' //iframe的url
	});
})

$('.goods-item').click(function(){
	layer_font = layer.open({
		type: 1,
		title: '订单商品',
		shadeClose: true,
		shade: 0.8,
		area: ['100%', '100%'],
		content: '{volist name="goods" id="vo"}\
			<div class="goods-list">\
			<div class="list-box">\
				<div class="goods-v">\
					<div class="v-img">\
						<img src="{$vo.picture}">\
					</div>\
					<div class="v-info">\
						<span class="brand">{$vo.brand_name}</span><p class="name">{$vo.goods_name}</p>\
						<p class="v-specval">￥{$vo.price}/{$vo.spec_name}({$vo.specval_name})x{$vo.num}</p>\
					</div>\
				</div>\
				<div class="">\
					<p>{$vo.num}{$vo.spec_name}/￥{$vo['num']*$vo['price']}</p>\
				</div>\
			</div>\
			</div>\
			{/volist}' //iframe的url
	});
})

$('body').delegate('.gocart','click',function(){
	var layer_msg, self=this;
	$(self).removeClass('gocart');
	var submit = function(){
		layer.close(layer_msg);
		var sval_str = '{$sval_str}', address = $('#address').data('id'),remarks = $('textarea[name="remarks"]').val();
		majax('{:url("order/add",["shop_id"=>$shop_id])}',{specval_id:sval_str,address_id:address,remarks:remarks},function(d){
			if (d.code>0) {
				layer.confirm(d.msg, {
					btn: ['查看订单','返回商户列表'], //按钮
					shade: false //不显示遮罩
				}, function(){
					window.location.href = '{:url("order/orderDetail",["shop_id"=>$shop_id],'')}?order_id='+d.data.parameters.order_id;
				}, function(){
					window.location.href = '{:url("Index/index")}'
				});
			}else{
				layer.msg(d.msg,{icon:2});
				$(self).addClass('gocart');
			}
		},{automsg:false,async:false});
	}

	majax('{:url("order/scheduling",["shop_id"=>$shop_id])}',{},function(d){
		if (d.code<=0) {
			layer_msg = layer.confirm(d.msg, {
				btn: ['确定下单','取消下单'], //按钮
				shade: false //不显示遮罩
			}, function(){
				submit();
			}, function(){
				$(self).addClass('gocart');
			});
		}else{
			submit();
		}
	},{automsg:false,async:false});
})

$('body').delegate('.paybtn','click',function(){
	var layer_msg, self=this;
	$(self).removeClass('paybtn');
	var submit = function(){
		layer.close(layer_msg);
		layer_msg = layer.load(3, {
			shade: [0.8,'#fff'] //0.8透明度的白色背景
		});
		var sval_str = '{$sval_str}', address = $('#address').data('id'),remarks = $('textarea[name="remarks"]').val();
		majax('{:url("order/pay",["shop_id"=>$shop_id])}',{specval_id:sval_str,address_id:address,remarks:remarks},function(d){
			if (d.code>0) {
				window.location.href = d.data.parameters.pay_info;
			}else{
				layer.msg(d.msg,{icon:2});
				$(self).addClass('paybtn');
			}
			layer.close(layer_msg);
		},{automsg:false,async:false});
	}

	majax('{:url("order/scheduling",["shop_id"=>$shop_id])}',{},function(d){
		if (d.code<=0) {
			layer_msg = layer.confirm(d.msg, {
				btn: ['确定下单','取消下单'], //按钮
				shade: false //不显示遮罩
			}, function(){
				submit();
			}, function(){
				$(self).addClass('paybtn');
			});
		}else{
			submit();
		}
	},{automsg:false,async:false});
})
</script>